<%--
  Created by IntelliJ IDEA.
  User: 13095
  Date: 2024/9/18
  Time: 12:14
  To change this template use File | Settings | File Templates.
--%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" language="java" pageEncoding="UTF-8" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<c:set value="${pageContext.request.contextPath}" var="path"></c:set>
<html>
<head>
    <meta charset="UTF-8">
    <title>历史订单</title>
    <script src="${path}/static/js/jquery-3.2.1.min.js"></script>
    <script src="${path}/static/js/script.js"></script>
    <jsp:include page="inc/inc.jsp"></jsp:include>
</head>
<body>
<header id="site-header" class="fixed-top">
    <section class="w3l-header-4">
        <div class="container">
            <nav class="navbar navbar-expand-lg navbar-light">
                <h1><a class="navbar-brand" href="${path}/user/index">
                    <span>跑腿平台</span>
                </a></h1>
                <button class="navbar-toggler collapsed" type="button" data-toggle="collapse"
                        data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="fa icon-expand fa-bars"></span>
                    <span class="fa icon-close fa-times"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav mx-lg-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/index">首页 </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/createTask">发起任务</a>
                        </li>
                        <li class="nav-item active">
                            <a class="nav-link" href="${path}/user/historyOrders">我的订单</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/wallet">钱包</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="${path}/user/myAddress">地址管理</a>
                        </li>
                        <li class="nav-item" >
                            <a class="nav-link" href="${path}/user/reviewList">我的评价</a>
                        </li>
                        <li class="nav-item" onclick="logOut()"><a class="nav-link">退出登录</a> </li>
                    </ul>
                    <ul class="navbar-nav search-right mt-lg-0 mt-2">

                         <li class="nav-item"><a href="${path}/user/updateUserInfo"
                                                class="btn btn-primary btn-style d-none d-lg-block btn-style mr-2"><span
                               class="fa fa-phone mr-3" aria-hidden="true"></span>  ${sessionScope.user.phone_number}</a>
                        </li>
                    </ul>

                    <!-- search popup -->
                    <div id="search" class="pop-overlay">
                        <div class="popup">
                            <form action="#" method="GET" class="d-sm-flex">
                                <input type="search" placeholder="Search.." name="search" required="required"
                                       autofocus>
                                <button type="submit">Search</button>
                                <a class="close" href="#url">&times;</a>
                            </form>
                        </div>
                    </div>
                    <!-- /search popup -->
                </div>
                <!-- toggle switch for light and dark theme -->
                <div class="mobile-position">
                    <nav class="navigation">
                        <div class="theme-switch-wrapper">
                            <label class="theme-switch" for="checkbox">
                                <input type="checkbox" id="checkbox">
                                <div class="mode-container">
                                    <i class="gg-sun"></i>
                                    <i class="gg-moon"></i>
                                </div>
                            </label>
                        </div>
                    </nav>
                </div>
            </nav>
        </div>
    </section>
</header>
<section class="w3l-about-breadcrumb text-left">
    <div class="breadcrumb-bg breadcrumb-bg-about py-3">
        <div class="container grid-breadcrumb">
            <ul class="breadcrumbs-custom-path mt-md-2">
                <li><a href="${path}/user/index">主页</a></li>
                <li class="active"><span class="fa fa-angle-double-right mx-2" aria-hidden="true"></span>我的订单
                </li>
            </ul>
        </div>
    </div>
</section>
<div class="form-41-mian mt-5 pt-lg-5 pt-md-4">
    <div class="container">
        <span class="subhny-title text-center mb-2">我的订单</span>
        <h3 class="hny-title text-center mb-md-5 mb-4" style="margin: 0 ; padding: 0;">历史订单</h3>
    </div>
</div>

    <table>
        <tr>
            <th>描述</th>
            <th>状态</th>
            <th>日期</th>
            <th>操作</th>
        </tr>
        <!-- 在这里循环输出历史订单 -->
        <c:forEach items="${requestScope.historyOrdersList.list}" var="orders">
            <tr>
                <td>${orders.task.description}</td>
                <td><c:if test="${orders.status}">
                    已完成
                </c:if>
                    <c:if test="${not orders.status}">
                        <a href="/user/reviews?taskID=${orders.task.id}">待评价</a>
                    </c:if></td>
                <td><fmt:formatDate value="${orders.completedAt}" pattern="yyyy-MM-dd "></fmt:formatDate></td>
                <td><a href="${path}/user/deleteHistoryOrders?id=${orders.id}">删除</a></td>
            </tr>
        </c:forEach>
    </table>
    <div class="pagination">
        <c:if test="${requestScope.historyOrdersList.hasPreviousPage}">
            <a href="${path}/user/historyOrders?page=${requestScope.ordersPageInfo.pageNum - 1}"
               title="上一页">上一页</a>
        </c:if>
        <c:forEach begin="1" end="${requestScope.historyOrdersList.pages}" var="pageNum">
            <c:choose>
                <c:when test="${pageNum == requestScope.historyOrdersList.pageNum}">
                    <span class="current-page" title="当前页：${pageNum}">${pageNum}</span>
                </c:when>
                <c:otherwise>
                    <a href="${path}/user/historyOrders?page=${pageNum}" title="跳转到第 ${pageNum} 页">${pageNum}</a>
                </c:otherwise>
            </c:choose>
        </c:forEach>
        <c:if test="${requestScope.historyOrdersList.hasNextPage}">
            <a href="${path}/user/historyOrders?page=${requestScope.historyOrdersList.pageNum + 1}"
               title="下一页">下一页</a>
        </c:if>
    </div>
    <a class="btn btn-outline-primary btn-style mr-2" href="/user/moreMenu">更多页面 <span
            class="fa fa-chevron-right"></span></a>
<div class="container" style="height: 800px;">
</div>

<!-- 分页导航开始 -->

<!-- 分页导航结束 -->

<jsp:include page="inc/footer.jsp"></jsp:include>
</body>
</html>